<template>
  <div class="company">
    <h1 class="company-title">会社情報</h1>

    <!-- 上半部分：右侧图片，左侧标题 Philosophy -->
    <section class="company-section">
      <div class="company-text">
        <h2 v-html="companyData.section1.title"></h2>
        <p v-html="companyData.section1.content.replace(/&lt;br&gt;/g, '<br>')"></p>
      </div>
      <div class="company-image">
        <img
          :src="companyData.section1.thumbnail"
          alt="Philosophy Image"
          class="background-image"
        />
      </div>
    </section>

    <!-- 中部：左侧图片，右侧标题 Vision -->
    <section class="company-section reverse">
      <div class="company-image">
        <img
          :src="companyData.section2.thumbnail"
          alt="Vision Image"
          class="background-image"
        />
      </div>
      <div class="company-text">
        <h2 v-html="companyData.section2.title"></h2>
        <p
          v-html="companyData.section2.content.replace(/&lt;br&gt;/g, '<br>')"
        ></p>
      </div>
    </section>

    <!-- 下部：公司信息 -->
    <div class="company-text access-header">
  <h2 v-html="companyData.section3.title"></h2>
  <dl class="company-profile">
    <template v-for="(item, index) in companyList" :key="index">
      <div class="profile-row">
        <dt>{{ item.label }}：</dt>  <!-- コロンを追加 -->
        <dd v-html="item.value"></dd>
      </div>
    </template>
  </dl>
  <h2>Access</h2>
</div>


    <div class="company-info">
      <section class="company-section access">
        <!-- 左侧：图片 -->
        <div class="company-image">
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.1164448833447!2d139.7678645772567!3d35.67413467258962!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xa6cbdf0c3d218ef%3A0x9aac8c60949fb516!2z5qGc5YCJ6KO96Jas5qCq5byP5Lya56S-!5e0!3m2!1sja!2sjp!4v1745554908063!5m2!1sja!2sjp"
            width="800"
            height="450"
            style="border: 0"
            allowfullscreen=""
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"
          >
          </iframe>
          <div
            style="
              margin: 15px;
              font-size: 18px;
              color: #666;
              font-family: 'Ming';
            "
           v-html="companyData.section4.summary">
            
          </div>
        </div>

        <!-- 右侧：地址和交通信息 -->
        <div class="company-text">
          <div class="transport" v-html="companyData.section4.content.replace(/&lt;br&gt;/g, '<br>')"></div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { getCompanyData } from "@/api"; // 导入获取公司数据的API

export default {
  name: "CompanyPage",
  data() {
    return {
      isMobile: false,
      companyData: {
        section1: {
          title: "",
          thumbnail: "",
          subtitle: "",
          content: "",
        },
        section2: {
          title: "",
          thumbnail: "",
          subtitle: "",
          content: "",
        },
        section3: {
          title: "",
          thumbnail: "",
          subtitle: "",
          content: "",
        },
        section4: {
          title: "",
          thumbnail: "",
          summary: "",
          content: "",
        },
      },
    };
  },
  computed: {
  companyList() {
    const html = this.companyData.section3.content || '';
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = html;

    const items = [];
    const children = Array.from(tempDiv.children);
    let currentLabel = '';
    children.forEach(p => {
      const parts = p.innerText.split('：');
      if (parts.length === 2) {
        currentLabel = parts[0].trim();
        items.push({ label: currentLabel, value: parts[1].trim() });
      } else if (parts.length === 1 && currentLabel === '所属団体') {
        const last = items[items.length - 1];
        last.value += `<br>${parts[0].trim()}`;
      }
    });
    return items;
  }
},

  async mounted() {
    this.handleResize();
    window.addEventListener("resize", this.handleResize);
    try {
      const data = await getCompanyData();
      this.companyData = {
        section1: {
          ...data.rows[0],
          content: data.rows[0].content.replace(/&lt;br&gt;/g, "<br>"),
        },
        section2: {
          ...data.rows[1],
          content: data.rows[1].content.replace(/&lt;br&gt;/g, "<br>"),
        },
        section3: {
          ...data.rows[2],
          content: data.rows[2].content.replace(/&lt;br&gt;/g, "<br>"),
        },
        section4: {
          ...data.rows[3],
          content: data.rows[3].content.replace(/&lt;br&gt;/g, "<br>"),
        },
      };
      console.log("Company data fetched:", this.companyData);
    } catch (error) {
      console.error("Error fetching service data:", error);
    }
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    handleResize() {
      this.isMobile = window.innerWidth <= 768;
    },
  },
};
</script>

<style scoped>
/* 整个页面样式 */
.company {
  text-align: center;
  background: linear-gradient(
    135deg,
    #fff 0%,
    #fff9f0 30%,
    #fff0f5 70%,
    #fff 100%
  );
  padding: 1px 9%;
}

/* 标题 "COMPANY" 居中 */
.company-title {
  text-align: center;
  font-size: 36px;
  margin: 40px 0;
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif; /* 添加黑体字体 */
  font-weight: 400; /* 取消加粗 */
  color: #666;
}

/* 每个公司模块 */
.company-section {
  display: flex; /* 修正display属性，原为ruby */
  flex-direction: row;
  align-items: center;
  gap: 30px;
  padding: 70px 10%;
  position: relative;
}

.company-image {
  flex: 0.5;
}

.company-profile-list {
  max-width: 800px;
  margin: 0 auto;
}

.profile-row {
  display: flex;
  align-items: flex-start;
  padding: 6px 28%;
  border-bottom: 1px solid #eee;
}

.profile-row dt {
  width: 160px;
  font-weight: normal;
  color: #333;
  text-align: end;
}

.profile-row dd {
  flex: 1;
  margin: 0;
  color: #666;
  line-height: 1.6;
  text-align: left;
}


/* 移动端样式优化 */
@media (max-width: 768px) {
  .company-section {
    padding: 20px 0 !important; /* 统一移动端内边距 */
  }

  .company-image img {
    max-height: 200px; /* 调整移动端图片高度 */
  }

  .company-section {
    flex-direction: column;
  }
  .company-image {
    order: -1; /* 移动端图片在上方 */
  }
}

.company-section.reverse {
  flex-direction: column; /* 取消reverse效果 */
}

.company-section::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(248, 215, 163, 0) 0%,
    rgba(248, 215, 163, 0.5) 50%,
    rgba(248, 215, 163, 0) 100%
  );
}

.company-section:last-child::before {
  display: none;
}

/* 下半部分：图片和文字不需要额外空隙 */
.company-section.access {
  gap: 60px;
  padding: 0 0%; /* 移除上下和左右的内边距 */
}

/* 下半部分：图片在左，文字在右 */
.company-section.reverse {
  flex-direction: row; /* 修改为 row */
}

/* 如果不需要 .reverse 的特定规则，可以直接用 .company-section */
.company-section .company-text {
  flex: 0.5;
  text-align: left;
  font-size: 1.05rem;
  line-height: 1.9;
  color: #555;
}

.company-section .company-text h2 {
  font-size: 1.9rem;
  margin-bottom: 25px;
  font-family: "HiraMinProN-W3", "Hiragino Mincho Pro", serif;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #2a2a2a;
  position: relative;
  padding-bottom: 15px;
}

.company-section .company-text h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, #f8d7a3, #f5b8ca);
}

.company-section .company-image {
  transition: all 0.3s ease;
}

.company-section .company-image img {
  width: 100%;
  max-height: 350px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
}

.company-section .company-image img:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  transform: scale(1.02);
}

/* Access 部分 */
.company-section.access .company-text.access-header {
  font-size: 2.5rem;
  font-weight: 400;
  color: #2a2a2a;
  margin-bottom: 20px;
}

.company-text.access-header h2 {
  font-size: 1.9rem;
  margin-bottom: 25px;
  font-family: "HiraMinProN-W3", "Hiragino Mincho Pro", serif;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #2a2a2a;
  position: relative;
  padding-bottom: 15px;
}
.company-text.access-header h4 {
  font-family: KozGoPr6N-Regular-83pv-RKSJ-H, "Kozuka Gothic Pr6N";
}
.company-text.access-header h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 46%;
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, #f8d7a3, #f5b8ca);
}

.company-section.access .company-info {
  display: flex;
  justify-content: space-between;
  gap: 60px; /* 确保图片和文字之间有空隙 */
  padding: 100px; /* 移除内边距 */
}

.company-section.access .company-info .address,
.company-section.access .company-info .transport {
  flex: 1;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #555;
  padding: 0; /* 移除内边距 */
}

.company-section.access .company-info .transport ul {
  list-style: none;
  padding: 0;
}
.company-section.access .transport ul {
  list-style: none;
  padding: 0;
}
.company-section.access .transport li {
  margin-bottom: 10px;
  padding-bottom: 10px;
  position: relative;
  padding-left: 25px;
}
.company-section.access .transport li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #8E44AD;
}

.company-section.access .transport .metro-icon {
  font-size: 1rem;
}

.pc-only {
  display: inline;
}
/* 响应式设计 */
@media (max-width: 1024px) {
  .company {
    padding: 0px 0%;
  }
  .company-section {
    flex-direction: column;
    padding: 0px 0%;
  }

  .company-text,
  .company-image {
    width: 88%;
  }
}

@media (max-width: 768px) {
  .company-section.access {
    gap: 0px;
  }
  .company-title {
    display: none; /* 隐藏标题 */
  }

  .company-section:first-child {
    padding-top: 20px; /* 第一个内容块顶部间距调整 */
  }
  .company-section {
    display: flex;
    flex-direction: column;
    padding: 0px 0% !important;
    gap: 5px;
  }
  .company-section.reverse {
    flex-direction: column; /* 移动端也保持统一布局 */
  }

  .company-text.access-header {
    position: relative;
    margin-top: 30px;
    text-align: center; /* 标题居中 */
    width: 100%;
  }

  .company-text.access-header::before {
    content: "";
    position: absolute;
    top: -15px;
    left: 50%; /* 改为50% */
    transform: translateX(-50%); /* 添加水平居中 */
    width: 90%;
    height: 1px;
    background: #000000;
  }

  .company-info {
    margin-top: 0;
  }
  .company-image {
    order: -1; /* 确保移动端图片也在上方 */
  }

  .company-image img {
    max-height: 250px;
  }

  .company-text p {
    font-size: 0.8rem;
    line-height: 1.6;
  }

  .company-section .company-text h2 {
    font-size: 1.9rem;
    margin-bottom: 18px;
    padding-bottom: 0px;
  }

  .metro-icon {
    color: #666;
  }

  .metro-icon svg {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 8px;
  }

  .company-section .company-text {
    font-size: 0.7rem;
  }

  .company-section.reverse .company-text h2 {
    text-align: right; /* 移动端Vision标题右对齐 */
    padding-right: 15px; /* 修正拼写错误，原为style */
  }

  .company-section.reverse .company-text h2::after {
    left: auto; /* 取消左侧定位 */
    right: 0; /* 右侧对齐 */
  }
  .pc-only {
    display: none; /* 移动端隐藏br标签 */
  }
}
.company-profile {
  text-align: center; /* 修改为居中 */
  margin: 20px auto;
  max-width: 600px;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #555;
}

/* 修改公司信息样式 */
.company-profile {
  text-align: left;
  margin: 20px auto;
  max-width: 600px;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #555;
}

.profile-row {
  display: flex;
  margin-bottom: 8px;
  width: 100%;
 
}

.profile-label {
  width: 50%; /* 固定宽度 */
  text-align: right; /* 右对齐 */
  padding-right: 15px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.profile-value {
  text-align: left;
  flex-grow: 1;
  padding-left: 0;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .company-profile {
    font-size: 0.85rem;
    padding: 0 15px;
  }

  .company-image > div[style] {
    font-size: 14px !important;
  }
  .profile-row {
    padding: 6px 0%;
  }
  .profile-label {
    width: 133px; /* 移动端稍小宽度 */
    padding-right: 2px;
  }
}
.company-profile p {
  margin-bottom: 8px;
}

.company-profile a:hover {
  text-decoration: underline;
}

.company-profile {
  font-size: 0.85rem;
  padding: 0 15px;
}
</style>

<style scoped>
/* 修改iframe样式 */
.company-image iframe {
  width: 100%;
  height: 450px;
  border-radius: 8px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
</style>
